import { addCandidate,editCandidate } from "@/apis/candidate";
import type { Candidate, CandidateAddFormMethods, candidateFormProps } from "@/types";
import { DatePicker, Form, Input, InputNumber, message, Modal } from "antd";
import dayjs, { Dayjs } from "dayjs";
import { forwardRef, useImperativeHandle, useState } from "react";

const CandidateAddForm = forwardRef((props: candidateFormProps, ref) => {
    const [form] = Form.useForm();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [isEdit,setIsEdit] = useState(false);
    const [messageApi] = message.useMessage();

    const open = (row?: Candidate) => {
        console.log("打开了子组件并传参=======>",row);
        if (row) {
            // 修改
            setIsEdit(true);
            // 数据回显
            if (row.birthday) {
                row.birthdayFiled = dayjs(row.birthday);   
            }
            form.setFieldsValue(row);
        }else {
            // 新增
            setIsEdit(false);
        }
        setIsModalOpen(true);
    };

    const handleOk = async () => {
        // 表单校验
        await form.validateFields();
        // 获取表单字段信息
        const row: Candidate = await form.getFieldsValue(true);
        row.birthday = row.birthdayFiled?.format('YYYY-MM-DD');
        console.log("获取的信息======>",row);
        if (isEdit) {
            const res = await editCandidate(row);
            if (res.code === 200) {
                // 成功提示
                message.success('修改成功！');
                // 重新查询
                props.reQuery();
           }
        }else {
           const res = await addCandidate(row);
           console.log("新增候选人res=====>",res);
           if (res.code === 200) {
                // 成功提示
                message.success('新增成功！');
                // 重新查询
                props.reQuery();
           }
        }
        // 清空表单
        clearForm();
        // 关闭表单    
        setIsModalOpen(false);
    };

    const handleCancel = async () => {
        clearForm();
        setIsModalOpen(false);
    };

    const clearForm = () => {
        form.resetFields();
    }

    useImperativeHandle(ref, () => ({
        open: open
  }));
    return (
        <Modal
            title={isEdit ? '修改候选人' : '新增候选人'}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
        >
            <Form
                form={form}
                name="candidateForm"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
                style={{ width: '100%' }}
                initialValues={{  }}
                autoComplete="off"
            >
                {/* 隐藏的 Form.Item，用于存储 id */}
                <Form.Item name="id" hidden>
                    <Input type="hidden" />
                </Form.Item>
                <Form.Item<Candidate>
                    label="姓名"
                    name="name"
                    rules={[{ required: true, message: '请填写姓名!' }]}
                >
                    <Input style={{ width: '300px' }}/>
                </Form.Item>
                <Form.Item<Candidate>
                    label="年龄"
                    name="age"
                    rules={[{ required: true, message: '请填写年龄!' }]}
                >
                    <InputNumber min={1} style={{ width: '300px' }}/>
                </Form.Item>
                <Form.Item<Candidate>
                    label="联系号码"
                    name="contactNumber"
                >
                    <Input style={{ width: '300px' }}/>
                </Form.Item>
                <Form.Item<Candidate>
                    label="生日日期"
                    name="birthdayFiled"
                >
                    <DatePicker style={{ width: '300px' }}/>
                </Form.Item>
            </Form>
        </Modal>
    )
})

export default CandidateAddForm;